<style>
    .table-responsive{overflow-x: inherit}
    td{ vertical-align: middle!important;}
    .pagination{ margin:0!important;}
</style>
<div class="col">
    <!-- main header -->
    <div class="bg-light lter b-b wrapper-md">
        <div class="row">
            <div class="col-sm-6 col-xs-12">
                <h1 class="m-n font-thin h3 text-black">Dashboard</h1>
                <small class="text-muted">数据概况</small>
            </div>
            <span class="pull-right" style="padding-right: 5%">
                <button class="btn btn-sm pull-right btn-success" ng-click="vm.refurbish()">刷新</button>
            </span>
            <span class="pull-right" style="padding-right: 3%;padding-top: 5px">
                {{vm.data.date}}
            </span>
        </div>
    </div>
    <!-- / main header -->
    <div class="wrapper-md" >
        <!-- stats -->
        <div class="row">
            <div class="col-md-5">
                <div class="row row-sm text-center">
                    <div class="col-xs-6">
                        <div class="panel padder-v item">
                            <div class="h1 text-info font-thin h1">{{vm.data.block.order_num}}</div>
                            <span class="text-muted text-xs">订单</span>
                            <div class="top text-right w-full">
                                <i class="fa fa-caret-down text-warning m-r-sm"></i>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <a href class="block panel padder-v bg-primary item">
                            <span class="text-white font-thin h1 block">{{vm.data.block.product_num}}</span>
                            <span class="text-muted text-xs">商品</span>
              <span class="bottom text-right w-full">
                <i class="fa fa-cloud-upload text-muted m-r-sm"></i>
              </span>
                        </a>
                    </div>
                    <div class="col-xs-6">
                        <a href class="block panel padder-v bg-info item">
                            <span class="text-white font-thin h1 block">{{vm.data.block.user_num}}</span>
                            <span class="text-muted text-xs">客户</span>
              <span class="top">
                <i class="fa fa-caret-up text-warning m-l-sm m-r-sm"></i>
              </span>
                        </a>
                    </div>
                    <div class="col-xs-6">
                        <div class="panel padder-v item">
                            <div class="font-thin h1">{{vm.data.block.favorite_num}}</div>
                            <span class="text-muted text-xs">关注</span>
                            <div class="bottom">
                                <i class="fa fa-caret-up text-warning m-l-sm m-r-sm"></i>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 m-b-md">
                        <div class="r bg-light dker item hbox no-border">
                            <div class="col dk padder-v r-r">
                                <div class="text-primary-dk font-thin h1"><span>${{vm.data.block.order_total}}</span></div>
                                <span class="text-muted text-xs">Revenue, 60% of the goal</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-7">
                <div class="panel panel-default">
                    <div class="panel-heading font-bold">订单比例</div>
                    <div class="panel-body">
                        <div ui-jq="plot"  ui-refresh="line" ui-options="
              {{d3_1}},
              {
                series: { pie: { show: true, innerRadius: 0.5, stroke: { width: 0 }, label: { show: true, threshold: 0.05 } } },
                colors: ['{{app.color.primary}}','{{app.color.info}}','{{app.color.success}}','{{app.color.warning}}','{{app.color.danger}}'],
                grid: { hoverable: true, clickable: true, borderWidth: 0, color: '#ccc' },
                tooltip: false,
                tooltipOpts: { content: '%s: %p.0%' }
              }
            " style="height:240px"></div>
                    </div>
                </div>
            </div>
        </div>
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading font-bold">30天用户注册数量</div>
                <div class="panel-body">
                    <div ui-jq="plot"  ui-refresh="line" ui-options="
              [
                { data: {{d0_3_1}}, label: '用户数量', points: { show: true }, lines: { show: true, fill: true, fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1}] } } },
              ],
              {
                colors: [ '{{app.color.info}}','{{app.color.warning}}' ],
                series: { shadowSize: 2 },
                 xaxis:{
                    font: { color: '#a1a7ac' } ,
                    position:'bottom',
                    ticks: {{d_01x}}
                },
                yaxis:{ font: { color: '#a1a7ac' } },
                grid: { hoverable: true, clickable: true, borderWidth: 0, color: '#dce5ec' },
                tooltip: true,
                tooltipOpts: { content: '%x 用户数量：%y',defaultTheme:false,shifts:{ x: 0, y: 20}}
              }
            " style="height:240px"></div>
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <div class="panel wrapper">
                <label class="i-switch bg-warning pull-right" ng-init="showSpline=true">
                    <input type="checkbox" ng-model="showSpline">
                    <i></i>
                </label>
                <h4 class="font-thin m-t-none m-b text-muted">30天订单金额</h4>
                <div ui-jq="plot" ui-refresh="line"  ui-options="
              [
                { data: {{d_01_1}}, label:'订单金额', points: { show: {{showSpline}}, radius: 1}, splines: { show: true, tension: 0.4, lineWidth: 1, fill: 0.8 } },
                { data: {{d_02_1}}, label:'实际支付金额', points: { show: {{showSpline}}, radius: 1}, splines: { show: true, tension: 0.4, lineWidth: 1, fill: 0.8 } }
              ],
              {
                colors: ['{{app.color.info}}', '{{app.color.primary}}'],
                series: { shadowSize: 2 },
                xaxis:{
                    font: { color: '#a1a7ac' } ,
                    position:'bottom',
                    ticks: {{d_01x}}

                },
                yaxis:{ font: { color: '#a1a7ac' }},
                x2axis:{
                    font: { color: '#a1a7ac' } ,
                    position:'bottom',
                    ticks: {{d_01x}}

                },
                y2axis:{ font: { color: '#a6a3ac' }},
                grid: { hoverable: true, clickable: true, borderWidth: 0, color: '#dce5ec' },
                tooltip: true,
                tooltipOpts: { content:' 订单额：￥%y.2',defaultTheme:false,shifts:{ x: 0, y: 20}}
              },

            " style="height:246px" >
                </div>
            </div>
        </div>

        </div>
    </div>
    <!-- / stats -->
    <!-- tasks -->
    <div class="wrapper-md">
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">30天热卖商品
                    <p class="input-group pull-right">
                        <label class="i-switch m-t-xs m-r">
                            <input type="checkbox" ng-click="vm.changeImg2()" ng-model="vm.flag2" >
                            <i></i>
                        </label>
                    </p>
                </div>
                <table class="table table-striped m-b-none">
                    <thead>
                    <tr>
                        <th>商品id</th>
                        <th ng-if="vm.flag2==true">商品图片</th>
                        <th>商品名称</th>
                        <th>数量</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="hot in vm.data.list.hot_30">
                        <td>{{hot.id}}</td>
                        <td ng-if="vm.flag2==true">
                            <div style="width: 100%">
                                <img ng-src="{{hot.image | imgwhq:100:200:90}}"style="width: 100px;height: 150px">
                            </div>
                        </td>
                        <td>{{hot.name}}</td>
                        <td>{{hot.qty}}</td>
                    </tr>
                    <tr ng-if="!vm.data.list.hot_30">
                        <td colspan="5" class="text-center">暂无数据！</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">30天购物车商品
                    <p class="input-group pull-right">
                        <label class="i-switch m-t-xs m-r">
                            <input type="checkbox" ng-click="vm.changeImg()" ng-model="vm.flag" >
                            <i></i>
                        </label>
                    </p>
                </div>
                <table class="table table-striped m-b-none">
                    <thead>
                    <tr>
                        <th>用户id</th>
                        <th ng-if="vm.flag==true" >商品图片</th>
                        <th>商品名称</th>
                        <th>数量</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="cart in vm.data.list.cart_30">
                        <td>{{cart.u_id}}</td>
                        <td ng-if="vm.flag==true" >
                            <div style="width: 100%">
                                <img ng-src="{{cart.image | imgwhq:100:200:90}}"style="width: 100px;height: 150px">
                            </div>
                        </td>
                        <td>{{cart.name}}</td>
                        <td>{{cart.qty}}</td>
                    </tr>
                    <tr ng-if="!vm.data.list.cart_30.length">
                        <td colspan="5" class="text-center">暂无数据！</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        </div>
    </div>
    <!-- / tasks -->
</div>